<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>{{msg}}</div>
    <button @click="msg='小王'">更新</button>
    <img :src="imgsrc" alt="">
    <button @click="gengxin">强制更新</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      created() {
        console.log("实例创建后")
      },
      mounted() {
        console.log("组件挂载后")
      },
      beforeUpdate() {
        console.log("组件更新前")
      },
      updated() {
        console.log("组件更新后")
      },
      methods: {
        gengxin() {
          console.log(88888888)
          // vm.$forceUpdate()迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
          this.$forceUpdate()//vue的强制更新渲染组件
        }
      },
      data() {
        return {
          msg: "小李",
          imgsrc: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476034952&di=0ce1cf2982e07ab318d903644e82c86a&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D86853839%2C3576305254%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D750%26h%3D390"
        }
      },
    })
  </script>
</body>

</html>